﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <style type="text/css">
    html {
    width: 100%; height: 100%; overflow: hidden; background: #E5E5E5;
    }
    body {
      position: relative;
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      background: #E5E5E5;
      margin: 0px;
    }
    .upload-cover {
      position: absolute;
      left: 40px;
      right: 40px;
      top: 30px;
      bottom: 30px;
      overflow: hidden;
    }
    
    .upload-cover .edit-btn {
      position: absolute;
      background: rgba(153, 153, 153, 0.5);
      color: #fff;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }
    
    .upload-cover .messageCover {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      padding-top: 120px;
      text-align: center;
    }
    
    .upload-cover .edit-btn.hide,
    .upload-cover .abort.hide,
    .upload-cover .messageCover.hide,
    .upload-cover .edit-btn.fade {
      display: none;
      z-index: 8;
    }
    
    .upload-cover .edit-btn.fade.in {
      display: block;
    }
    
    .upload-cover img {
      z-index: 1000;
      width: 450px;
      height: 270px;
    }
  </style>
</head>

<body id="file-upload-dialog">
<input type="hidden" id="input_uploaded" name="uploaded" value="false" />
<input type="hidden" id="input_hash" name="hash" />
<input type="hidden" id="input_key" name="key" />
<input type="hidden" id="input_temp_domain" name="temp_domain" value="{{ temp_domain }}" />
<input type="hidden" id="input_prod_domain" name="prod_doamin" value="{{ prod_domain }}" />
<div class="upload-cover">
  <button type="button" id="pickCover" class="edit-btn"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;&nbsp;选择文件</button>
  <div id="coverPreviewList">
    <img id="coverPreview" src=""/>
  </div>
  <label id="messageCover" class="control-label messageCover hide"></label>
</div>


<script src="{{ domain }}/static/js/jquery-1.11.0.min.js"></script>
<script src="{{ domain }}/static/js/plupload.full.min.js"></script>
<script src="{{ domain }}/static/js/qiniu.min.js"></script>


<script>
document.domain = '{{  root_domain }}';
$(document).ready(function() {
  var imgSrc = $("#file-upload-dialog .upload-cover").find("img").attr("src");
  if(imgSrc == null || imgSrc == undefined) {
    $("#file-upload-dialog .upload-cover").find("img").addClass("hide");
  }
  
  var target = $("#file-upload-dialog .upload-cover")
  
  $(target).hover(function(){
    $(target).find(".edit-btn").addClass("in");
  },function(){
    $(target).find(".edit-btn").removeClass("in");
  })
  
  $.ajax({
    
    url: "{{ domain }}/upload-token?bucket={{ prod_bucket }}",
    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
    // Work with the response
    success: function( response ) {
      var uploaderCover = Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'pickCover',
        uptoken: response.token,
        domain: 'http://upload.qiniu.com/',
        max_file_size: '4mb',
        max_retries: 3,
        chunk_size: '2mb',
        save_key: true,
        auto_start: true,
        init: {
          'BeforeUpload': function(up, file) {
            $('#input_uploaded').val(false);
          },
          'UploadProgress': function(up, file) {
            $('#messageCover').removeClass("hide");
            $(".edit-btn").addClass("hide").prop("disabled", true);
            $('#messageCover').html("正在上传图片，请稍后");
            $('#submitBtn').attr("disabled", "disabled");
          },
          'FileUploaded': function(up, file, info) {
            var res = $.parseJSON(info);
            var cover_box = '';
            $('#coverPreview').attr("src", "{{ prod_domain }}/" + res.key + "-0.6");
            $('#coverPreviewList').css("display", "block");
            $('#cover').val(res.key);
            $('#messageCover').html("加载图片完成");

            // update hidden input
            $('#input_uploaded').val(true);
            $('#input_hash').val(res.hash);
            $('#input_key').val(res.key);
            
            // invoke parent page uploaed_callback function
            res.temp_domain = '{{ temp_domain }}';
            res.prod_domain = '{{ prod_domain }}';
            
            setTimeout(function() {
              $('#messageCover').addClass("hide");
              $(".edit-btn").addClass("fade").removeClass("hide").prop("disabled", false).html("<span class='glyphicon glyphicon-repeat' aria-hidden='true'></span>&nbsp;&nbsp;重新上传");
            }, 1500);
            $('#submitBtn').removeAttr('disabled');
          },
          'Error': function(up, err, errTip) {
            $('#messageCover').html("图片上传异常，请稍后重试");
          }
        }
      });
    }
  });
});
</script>
</body>
</html>
